<template>
  <div class="listWapper">
    <customDetailsTopbar title="安全风险管控" :show-right-icon="true" flag @back="back">
      <template v-if="active !== '“四新”台账'" #right>
        <i class="iconfont mr-1" :class="{ active: topActive }" @click="getList">&#xe6b6;</i>
        <i class="iconfont" :class="{ active: !topActive }" @click="getChart">&#xe651;</i>
      </template>
    </customDetailsTopbar>
    <div id="customScroolBox" class="listInner px-1">
      <div class="d-flex w-100">
        <custom-radio-tag1 v-if="topActive" class="w-100" :list="list" :value="activeIndex" is-scroll @change="tagChange" />
      </div>
      <template v-if="topActive">
        <customSearch ref="customSearch" placeholder="请输入企业名称" title="企业列表" :is-super-search="secondActive === '易燃易爆危险点'||secondActive ==='3-9人危险作业场所'||secondActive ==='危险手工工序'||secondActive ==='有限空间'||active === '“四新”台账'" :total="total" @search="handleSearch" @superSearch="openSuperSearch" />
        <div>
          <div v-if="active !== '“四新”台账'" class="d-flex mt-2 w-100 tagNew">
            <custom-radio-tag1 class="mb-1 w-100" :list="riskPointList" :value="secondActiveIndex" is-scroll @change="secondTagChange" />
          </div>
          <div v-if="listData.length > 0" class="common_list">
            <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
              <div class="content_area">
                <div class="number_order">{{ index + 1 }}</div>
                <div class="right_content">
                  <div class="content_title" style="max-width: 100%">
                    {{ item.companyName }}
                  </div>
                  <ul>
                    <li v-for="(desc, ind) in descList" :key="ind">
                      <i :class="'iconfont c-text-color' + (ind + 1)" v-html="desc.icon" />
                      <div class="label">{{ desc.label }}：</div>
                      <div class="value">{{ (item[desc.field] + '') || '/' }}</div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
          <customLoadmore ref="customLoadmore" :page-num="form.pageNum" :pages="pages" @load="handlePages" />
        </div>
        <van-popup v-model="superSearch" position="right" :style="{ width: '90%', height: '100%' }" lock-scroll close-on-popstate closeable class="custom-van-pop">
          <div class="pop-vertical-flex">
            <div class="pop-content">
              <template v-if="secondActive === '易燃易爆危险点' && active==='风险管控清单'">
                <customPopCheckbox :list="selectOptionAll['安全-易燃易爆危险点级别']" :check-value.sync="form.dangerLevel" title="易燃易爆危险点级别" />
                <customPopCheckbox :list="selectOptionAll['安全-风险-可能导致的事故类别']" :check-value.sync="form.accidentType" title="可能导致的事故类别" />
                <!-- <customPopCheckbox :list="selectOptionAll['是否']" :check-value.sync="form.isBig" title="是否为重大危险源" />
                <customPopCheckbox :list="selectOptionAll['安全-重大危险源等级']" :check-value.sync="form.bigLevel" title="重大危险源等级" />
               -->
              </template>
              <template v-else-if="secondActive === '危险手工工序' && active==='风险管控清单'">
                <customPopCheckbox :list="selectOptionAll['危险手工工序-危险等级']" :check-value.sync="form.processLevel" title="级别" />
              </template>
              <template v-else-if="secondActive === '3-9人危险作业场所' && active==='风险管控清单'">
                <customPopCheckbox :list="selectOptionAll['安全-风险-可能导致的事故类别']" :check-value.sync="form.accidentType" title="可能导致的事故类别" />
              </template>
              <template v-if="secondActive === '有限空间' && active==='风险管控清单'">
                <customPopCheckbox :list="selectOptionAll['安全-有限空间类别']" :check-value.sync="form.spaceType" title="有限空间类型" />
                <customPopCheckbox :list="selectOptionAll['安全-有限空间-主要危害因素']" :check-value.sync="form.dangerousFactor" title="主要危害因素" />
              </template>
              <template v-else-if="secondActive === ''|| active==='“四新”台账'">
                <custom-timer type="year" title="所属年份" :is-interval="false" :picker-title="'请选择所属年份'" :date-value="form.year" @update:dateValue="getTime" />
              </template>
            </div>
            <div class="pop-bottom">
              <van-button type="default" @click="resetSuperSearch">清空</van-button>
              <van-button type="info" @click="handleSuperSearch">确认</van-button>
            </div>
          </div>
        </van-popup>
      </template>
      <template v-else>
        <div class="environment-wrap px-1 pb-1">
          <customTitle :is-icon="true" icon="&#xe790;" bg-color="#07cdd4" icon-color="#07cdd4" title="安全风险管控统计" />
          <div v-for="(item, index) in dataList" :key="index" class="content-box">
            <div class="total">
              {{ item.name }}
              <h3>{{ item.value }}</h3>
            </div>
            <ul v-if="item.classifyData.length > 0">
              <li v-for="(it, ind) in item.classifyData" :key="ind">
                <span class="name">{{ it.name }}</span>
                <b>{{ it.value }}</b>
              </li>
            </ul>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import commonList from '@/assets/mixin/commonList'
import refHandler from '@/assets/mixin/refHandler'
import { riskCount, companyDangerLedger, fourNewsLedger, IsDangerousLedger, riskProcessList, limitSpaceOne } from '@/api/safety'

export default {
  mixins: [commonList, refHandler],
  data() {
    return {
      topActive: true,
      active: '风险管控清单',
      activeIndex: 0,
      secondActive: '易燃易爆危险点',
      secondActiveIndex: 0,
      form: {
        pageNum: 1,
        pageSize: 10,
        companyIds: '-1',
        companyId: '-1',
        companyName: '',
        year: ''
      },
      list: [
        {
          label: '风险管控清单',
          listFun: companyDangerLedger// 同易燃易爆危险点listFun
        },
        {
          label: '“四新”台账',
          listFun: fourNewsLedger
        }
      ],
      riskPointList: [
        { label: '易燃易爆危险点', listFun: companyDangerLedger },
        // { label: '风险点', listFun: companyRiskList },
        { label: '危险手工工序', listFun: riskProcessList },
        { label: '3-9人危险作业场所', listFun: IsDangerousLedger },
        { label: '有限空间', listFun: limitSpaceOne }
      ],
      foreNewDescList: [
        { label: '企业名称', icon: '&#xe62c;', field: 'companyName' },
        { label: '“四新”总数', icon: '&#xe62c;', field: 'fourNewsSum' },
        { label: '完成安全评审数量', icon: '&#xe62c;', field: 'isSafaAuditSum' },
        { label: '完成培训数量', icon: '&#xe62c;', field: 'isTrainSum' }
      ],
      explosiveDescList: [
        { label: '易燃易爆危险点名称', icon: '&#xe61c;', field: 'dangerName' },
        { label: '所在位置', icon: '&#xe61c;', field: 'position' },
        { label: '易燃易爆危险点级别', icon: '&#xe61c;', field: 'dangerLevel' },
        { label: '是否为重大危险源', icon: '&#xe61c;', field: 'isBIg' }
      ],
      riskPointDescList: [
        { label: '风险点总数', icon: '&#xe61c;', field: '' },
        { label: '重大风险点', icon: '&#xe87e;', field: '' },
        { label: '较大风险点', icon: '&#xe87e;', field: '' },
        { label: '一般风险点', icon: '&#xe87e;', field: '' },
        { label: '低风险点', icon: '&#xe87e;', field: '' }
      ],
      riskProcessDescList: [
        { label: '危险手工工序名称', icon: '&#xe61c;', field: 'riskProcessName' },
        { label: '级别', icon: '&#xe61c;', field: 'processLevel' }
      ],
      oneToNineDescList: [
        { label: '3-9人危险作业场所名称', icon: '&#xe87e;', field: 'isDangerousName' },
        { label: '所在位置', icon: '&#xe87e;', field: 'position' },
        { label: '可能导致的事故类别', icon: '&#xe87e;', field: 'accidentType' }
      ],
      limitSpaceDescList: [
        { label: '有限空间名称', icon: '&#xe87e;', field: 'limitSpaceName' },
        { label: '所在位置', icon: '&#xe87e;', field: 'location' },
        { label: '有限空间类型', icon: '&#xe87e;', field: 'spaceType' }
      ],
      listFun: companyDangerLedger,
      current: '',
      listData: [],
      dataList: [
        {
          name: '易燃易爆危险点',
          value: 0,
          classifyData: [
            { name: 'Ⅰ级危险点', value: 0 },
            { name: 'Ⅱ级危险点', value: 0 },
            { name: 'Ⅲ级危险点', value: 0 }
          ]
        },
        {
          name: '重大危险源数量',
          value: 0,
          classifyData: [
            { name: '一级重大危险源', value: 0 },
            { name: '二级重大危险源', value: 0 },
            { name: '三级重大危险源', value: 0 },
            { name: '四级重大危险源', value: 0 }
          ]
        },
        {
          name: '危险手工工序',
          value: 0,
          classifyData: [
            { name: '高', value: 0 },
            { name: '中', value: 0 },
            { name: '低', value: 0 }
          ]
        },
        {
          name: '3-9人危险作业场所',
          value: 0,
          classifyData: []
        },
        {
          name: '有限空间数量',
          value: 0,
          classifyData: []
        }
      ]
    }
  },
  computed: {
    descList() {
      let checkValue = this.active
      if (checkValue !== '“四新”台账') {
        checkValue = this.secondActive
      }
      switch (checkValue) {
        case '易燃易爆危险点':
          return this.explosiveDescList
        case '风险点':
          return this.riskPointDescList
        case '“四新”台账':
          return this.foreNewDescList
        case '危险手工工序':
          return this.riskProcessDescList
        case '3-9人危险作业场所':
          return this.oneToNineDescList
        case '有限空间':
          return this.limitSpaceDescList
        default:
          return []
      }
    }
  },
  created() {
    this.initTag()
  },
  mounted() {
    const { current } = this.$route.query
    if (current) {
      this.current = current
    }
    this.companyList()
  },
  methods: {
    getList() {
      this.topActive = true
      // this.currentComponent = this.topActive ? this.list.value1 : this.list.value2
    },
    getTime(value) {
      this.form.year = value
    },
    getChart() {
      this.topActive = false
      this.riskCount()
      // this.currentComponent = this.topActive ? this.list.value1 : this.list.value2
    },
    initTag() {
      const { current, active, secondActive } = this.$route.query
      current ? this.current = current : ''
      active ? this.active = active : ''
      secondActive ? this.secondActive = secondActive : ''
      if (active) {
        const checkValueIndex = this.list.findIndex(val => val.label === active)
        this.activeIndex = checkValueIndex
        this.listFun = this.list.find(val => val.label === active).listFun
      }
      if (secondActive) {
        const checkValueIndex = this.riskPointList.findIndex(val => val.label === secondActive)
        this.secondActiveIndex = checkValueIndex
        this.listFun = this.riskPointList.find(val => val.label === secondActive).listFun
      }
    },
    tagChange(tagArg) {
      const { label, listFun } = tagArg.item
      this.active = label
      this.activeIndex = tagArg.index
      if (label === '风险管控清单') {
        this.secondActive = '易燃易爆危险点'
        this.secondActiveIndex = 0
      } else {
        this.secondActive = ''
        this.secondActiveIndex = -1
      }
      this.listFun = listFun
      this.form.pageNum = 1
      this.listData = []
      this.resetSuperSearch()
      this.companyList()
    },
    secondTagChange(tagArg) {
      const { label, listFun } = tagArg.item
      this.secondActive = label
      this.secondActiveIndex = tagArg.index
      this.listFun = listFun
      this.form.pageNum = 1
      this.listData = []
      this.resetSuperSearch()
      this.companyList()
    },
    // 分页
    handlePages(value) {
      this.form.pageNum = value
      this.companyList()
    },
    async riskCount() {
      // this.$refs.customLoadmore.loadStatus = true
      const { status, data: resData } = await riskCount({ companyId: '-1' })
      if (status === 0 && resData) {
        let data = resData.find(val => val.typeName === '易燃易爆危险点')
        this.dataList[0].value = data?.count
        this.dataList[0].classifyData = data.allDetailTypeVo.map(val => ({ name: val.typeName, value: val.count }))
        data = resData.find(val => val.typeName === '重大危险源数量')
        this.dataList[1].value = data?.count
        this.dataList[1].classifyData = data.allDetailTypeVo.map(val => ({ name: val.typeName, value: val.count }))
        data = resData.find(val => val.typeName === '危险手工工序')
        this.dataList[2].value = data?.count
        this.dataList[2].classifyData = data.allDetailTypeVo.map(val => ({ name: val.typeName, value: val.count }))
        data = resData.find(val => val.typeName === '3-9人危险作业场所')
        this.dataList[3].value = data?.count
        data = resData.find(val => val.typeName === '有限空间数量')
        this.dataList[4].value = data?.count
      }
      // this.$refs.customLoadmore.loadStatus = false
    },
    // 企业名称查询
    handleSearch(value) {
      this.form.companyName = value
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 高级查询
    handleSuperSearch() {
      this.superSearch = false
      this.form.pageNum = 1
      this.listData = []
      this.companyList()
    },
    // 级联选择器选择变化
    cascadeChange(args) {
      this.form.industryType = args.selectedOptions[args.selectedOptions.length - 1].text || ''
    },
    // 重置
    resetSuperSearch() {
      const pageSize = this.form.pageSize
      const pageNum = this.form.pageNum
      Object.keys(this.form).forEach(val => {
        this.form[val] = ''
      })
      // 重置输入框查询
      this.$refs.customSearch.restore()
      this.form.pageSize = pageSize
      this.form.pageNum = pageNum
      this.form.companyIds = -1
      this.form.companyId = '-1'
    },
    // 跳转详情
    goToDetails(item) {
      // const { riskId, fourNewsId } = item
      // const query = { id: riskId || fourNewsId, current: this.current, active: this.active }
      // this.$router.push({
      //   path: this.active !== '“四新”台账' ? '/staging/riskManagementListDetail' : '/staging/riskManagementDetail',
      //   query
      // })
      if (this.secondActive === '易燃易爆危险点' || this.secondActive === '3-9人危险作业场所' || this.secondActive === '危险手工工序' || this.secondActive === '有限空间') {
        const secondActive = this.secondActive
        this.$router.push({
          path: '/staging/riskManagementDetail',
          query: { ...item, current: this.current, active: this.active, secondActive }
        })
      }
      if (this.active === '“四新”台账') {
        this.secondActive = ''
        this.$router.push({
          path: '/staging/riskManagementListDetail',
          query: { ...item, year: this.form.year, current: this.current, active: this.active }
        })
      }
    },
    // 返回工作台
    back() {
      this.$router.push({
        path: '/staging/monitor',
        query: { current: this.current }
      })
    },
    // 获取企业列表数据
    async companyList() {
      this.$refs.customLoadmore.loadStatus = true
      // this.layout.showLoading()

      const { status, data } = await this.listFun(this.form).catch(() => {
        // this.layout.hideLoading()
        this.$refs.customLoadmore.loadStatus = false
      })
      if (status === 0 && data) {
        this.total = data.total
        this.listData = this.listData.concat(data.list)
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      // this.layout.hideLoading()
    }
  }
}
</script>

<style lang="scss" scoped>
.iconfont.active {
  color: #64ebfb;
}

.environment-wrap {
  background-color: #fff;
  .content-box {
    padding: 10px;
    background-color: #e5feff;
    border-radius: 10px;
    border: solid 2px #07cdd4;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .total {
      width: 50%;
      text-align: center;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      font-size: 0.373rem;
      line-height: 0.533rem;
      h3 {
        color: #07cdd4;
      }
    }
    ul {
      width: 50%;
      display: flex;
      flex-wrap: wrap;
      li {
        display: flex;
        justify-content: space-between;
        height: 50px;
        background-color: rgba(139, 220, 223, 0.5);
        border-left: solid 2px #07cdd4;
        border-right: solid 2px #07cdd4;
        margin: 5px 5px;
        align-items: center;
        padding: 0 10px;
        font-size: 0.373rem;
        color: #051b32;
        position: relative;
        width: 100%;
        &::before {
          content: '';
          width: 100%;
          height: 1px;
          border-left: 6px solid #07cdd4;
          border-right: 6px solid #07cdd4;
          position: absolute;
          top: 0;
          left: 0;
        }
        &::after {
          content: '';
          width: 100%;
          height: 1px;
          border-left: 6px solid #07cdd4;
          border-right: 6px solid #07cdd4;
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
    }
  }
}

::v-deep .tagNew .RadioTags ul li {

    padding: 0 0.23333rem !important;

}
</style>
